<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyTodolist</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/htmnav-demo.css">
    <!--演示页面样式，使用时可以不引用-->
    <link href="dist/camroll_slider.css" rel="stylesheet">
    <style>
        #my-slider {
            width: 100%;
            height: 570px;
            color: white;
        }
        
        @media (max-width: 640px) {
            #my-slider .crs-bar-roll-current {
                width: 38px;
                height: 38px;
            }
            #my-slider .crs-bar-roll-item {
                width: 30px;
                height: 30px;
            }
        }
    </style>
</head>

<body>
    <!-- 轮播背景图 -->
    <section>
        <div id="my-slider" class="crs-wrap">
            <div class="crs-screen">
                <div class="crs-screen-roll">
                    <div class="crs-screen-item" style="background-image: url('images/bkpp01.jpg')">
                        <div class="crs-screen-item-content"></div>
                    </div>
                    <div class="crs-screen-item" style="background-image: url('images/bkpp02.jpg')">
                        <div class="crs-screen-item-content"></div>
                    </div>
                    <div class="crs-screen-item" style="background-image: url('images/bkpp04.jpg')">
                        <div class="crs-screen-item-content"></div>
                    </div>
                    <div class="crs-screen-item" style="background-image: url('images/bkpp05.jpg')">
                        <div class="crs-screen-item-content"></div>
                    </div>
                    <div class="crs-screen-item" style="background-image: url('images/bkpp06.jpg')">
                        <div class="crs-screen-item-content"></div>
                    </div>
                    <div class="crs-screen-item" style="background-image: url('images/bkpp07.jpg')">
                        <div class="crs-screen-item-content"></div>
                    </div>
                    <div class="crs-screen-item" style="background-image: url('images/bkpp09.jpg')">
                        <div class="crs-screen-item-content"></div>
                    </div>
                    <div class="crs-screen-item" style="background-image: url('images/bppp10.jpg')">
                        <div class="crs-screen-item-content"> </div>
                    </div>
                </div>
            </div>
            <div class="crs-bar">
                <div class="crs-bar-roll-current"></div>
                <div class="crs-bar-roll-wrap">
                    <div class="crs-bar-roll">
                        <div class="crs-bar-roll-item" index="0" style="background-image: url('images/bkpp01.jpg')"></div>
                        <div class="crs-bar-roll-item" index="1" style="background-image: url('images/bkpp02.jpg')"></div>
                        <div class="crs-bar-roll-item" index="2" style="background-image: url('images/bkpp04.jpg')"></div>
                        <div class="crs-bar-roll-item" index="3" style="background-image: url('images/bkpp05.jpg')"></div>
                        <div class="crs-bar-roll-item" index="4" style="background-image: url('images/bkpp06.jpg')"></div>
                        <div class="crs-bar-roll-item" index="5" style="background-image: url('images/bkpp07.jpg')"></div>
                        <div class="crs-bar-roll-item" index="6" style="background-image: url('images/bkpp09.jpg')"></div>
                        <div class="crs-bar-roll-item" index="7" style="background-image: url('images/bppp10.jpg')"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="startbox">
        点击可停止背景滚动&nbsp;&nbsp;&nbsp;&nbsp;
        <a class="startlink" href="javascript:;"><img src="images/start (1).png" alt="点击暂停"></a>
    </section>
    <section class="todolist">
        <div class="container">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    To do list
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <section>
                                <form id="form">
                                    <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
                                </form>
                            </section>
                            <section class="mylist">
                                <h2 onclick="save()">正在进行 <span id="todocount">0</span></h2>
                                <ol id="todolist" class="demo-box">
                                </ol>
                                <h2>已经完成 <span id="donecount">0</span></h2>
                                <ul id="donelist">
                                </ul>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="dist/camroll_slider.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
    <script>
        $("#my-slider").camRollSlider();
    </script>
</body>

</html>